<!-- 
    1.js操作：
            控制页面

    2.dom操作：         操作页面
            document
            object
            model


    3.bom操作：         浏览器对象模型
            broswer
            object
            model
-->






<!-- dom操作流程

    一.获取目标：
            法1：
                get     具体名称
            
            法2：
                query   标签
    
-------------------------------------------------------------------------------------------------    
    二.绑定事件：
            1.窗口
                    window.onload      监听窗口加载
                    window.conscroll   监听滚动条滚动
                    window.onresize    监听窗口大小
-------------------------------------------------------------------------------------------------
            2.鼠标

                    左键：
                        onclick         单击（抬起后触发）
                        ondblclick      双击（抬起后触发）
                        onmouseenter    滑入
                        onmousemove     移动
                        onmouseleave    滑出
                        onmousedown     按下
                        onmouseup       抬起

                    右键:
                        oncontextmenu   右键菜单（return false 则不显示）
-------------------------------------------------------------------------------------------------
            3.键盘                  配合this.value  可以打印对应值

                    onkeydown       按下触发（不抬起一直触发）
                    onkeypress      按下能产生字符的键，触发（不抬起一直触发）
                    onkeyup         抬起（抬起触发）
                    onfocus         聚焦（点击触发）
                    onblur          失焦（点击触发）
-------------------------------------------------------------------------------------------------
            4.输入框input           也会触发相应的键盘操作

                    oninput         输入内容改变        触发
                    onchange        输入内容改变+失焦   触发

-------------------------------------------------------------------------------------------------
            5.表单form                表单是对象

                    document.forms[0].onsubmit=function(){      提交时执行自定义操作
                    console.log("点击了提交");
                    return false        //  避免真的提交，跳转页面
                }
-------------------------------------------------------------------------------------------------
            6.特殊

                    .stopPropagation()     //   阻止冒泡穿透

                    .preventDefault()      //  阻止默认事件（这里是超链接跳转）

                    location.href="网址"      //  自定义跳转到

            document.addEventListener("click", function () {函数}    //  同时打印且不会覆盖其他打印

            document.removeEventListener("click", fun1)     //  删除指定目标的指定事件


-------------------------------------------------------------------------------------------------
    三.修改内容：
            1.元素

            this.innerText = "<a href='#top'>芝士雪豹</a>" // innerText只获取内容，不关心标签功能
                                        //  打印结果为  <a href='#top'>芝士雪豹</a>

            this.innerHTML = "<a href='#top'>芝士雪豹</a>" // innerHTML获取内容也会实现标签功能
                                        //  打印结果为  芝士雪豹    一个超链接


-------------------------------------------------------------------------------------------------
            2.属性

                .getAttribute("属性名")       //  获取属性
                .setAttribute("属性名", 操作)   //  修改属性操作
                .hasAttribute("属性名")     //  是否拥有属性
                .removeAttribute("属性名")  //  删除属性




-------------------------------------------------------------------------------------------------
            3.样式
                    获取：
                        // 只能获取行内样式，获取不到行外样式
                        // console.log(this.style.属性名);      //  法1

                        // console.log(this.属性名);    // 法2


                        // 可以获取行外样式
                        getComputedStyle((目标).属性名)     //  被计算后的最终样式

                    修改：

                        this.style = "属性:值"      //  会覆盖其他样式

                        this.style.样式属性名 = 样式属性值      //  不会覆盖其他样式




-------------------------------------------------------------------------------------------------
    四.案例：
            1.计数器案例
            2.
            3.


-->








<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom</title>
    <style>
        .outer {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .inner {
            width: 100px;
            height: 100px;
            background-color: aquamarine;

        }


    </style>


</head>

<body>
    <!-- <div>

        <span id="span" class="span">span</span>


        <input type="text" name="" id="">
        <input type="text" placeholder="输入内容">



        <form action="http://httpbin.org/post" method="post">
            <p><label for="username">账&emsp;号</label><input id="username" type="text" required></p>
            <p><label for="password">密&emsp;码</label><input id="password" type="text"></p>
            <p><input value="提交" type="submit"></p>
        </form>


        <div class="outer">
            <div class="inner">
                <a href="https://www.baidu.com">百度</a>
            </div>
        </div>


    </div> -->



    <!-- <div>
        <span id="top">超链接：<a href="#top">小黑子</a></span>
    </div> -->




    <!-- <div>
        <span class="counter">
            <button class="sub">-</button>
            <span>0</span>
            <button class="add">+</button>
        </span>

    </div> -->


    
    <!-- <div>
        <span class="counter">
            <button class="sub">-</button>
            <span>0</span>
            <button class="add">+</button>
        </span>

        <span class="counter">
            <button class="sub">-</button>
            <span>0</span>
            <button class="add">+</button>
        </span>

        <span class="counter">
            <button class="sub">-</button>
            <span>0</span>
            <button class="add">+</button>
        </span>
    </div> -->



    <!-- <div>
        <img src="/素材/img/QQ.png" title="QQ">
    </div> -->
























    <script>// // ---------------------------------一，获取目标-------------------------
        // // 通过id获取元素（返回元素）
        // 只能获取1个
        // let span = document.getElementById("span1")
        // console.log(span);


        // // 通过类名获取元素（返回数组）
        // // 获取1个
        // let span1 = document.getElementsByClassName("span1")
        // console.log(span1);     // 数组
        // // 获取多个
        // let spans = document.getElementsByClassName("span")
        // console.log(spans);     //  数组
        // console.log(spans[0], spans[spans.length-1]);   //  具体元素
    </script>






    <div><!-- ---------------------------------------二，绑定事件-------------------------- -->
        <script>// // -------------窗口-----------------------
            // window.onload = function () {       //  监听窗口加载事件
            //     console.log("窗口加载完成了");
            //     let span = document.querySelector("span")   //  加载完才回去找
            //     console.log(span);
            // }
            // window.onscroll = function () {     //  监听滚动事件
            //     console.log("滚动了", window.scrollY);      //  window.scrollY  滚动Y轴坐标
            // }
            // window.onresize=function(){
            //     console.log("窗口大小变化了");
            // }
            // window.blur = function () {
            //     console.log("失焦");
            // }
            // window.focus = function () {
            //     console.log("聚焦");
            // }

        </script>



        <script>// // -------------鼠标-----------------------

            // window.onclick = function () {      //  监听鼠标点击事件
            //     console.log("点击了");      //  抬起才会打印一次
            // }
            // window.document.onclick = function () {      //  监听点击事件
            //     console.log("点击了");      //  抬起才会打印一次
            // }
            // document.onclick = function () {      //  监听点击事件
            //     console.log("点击了");      //  抬起才会打印一次
            // }

            // document.ondblclick = function () {      //  监听点击事件
            //     console.log("双击了");      //  抬起才会打印一次
            // }


            // document.onmouseenter=function(){       //  鼠标滑入
            //     console.log("滑入");
            // }

            // document.onmousemove=function(){       //  鼠标移动
            //     console.log("移动");
            // }

            // document.onmouseleave=function(){       //  鼠标滑出
            //     console.log("滑出");
            // }

            // document.oncontextmenu = function () {
            //     console.log("右键菜单");
            //     return false        //  return false则不显示右键菜单
            // }


            // //-----------------------结合窗口window----------------------------------------
            // window.onload = function () {       //  监听窗口加载事件
            //     let span = document.querySelector("span")   //  加载完才回去找

            // span.onclick = function () {
            //     console.log("点击了", this);
            // }

            // span.ondblclick = function () {      //  监听点击事件
            //     console.log("双击了", this);      //  抬起才会打印一次
            // }

            // span.onmousedown = function () {      //  监听点击事件
            //     console.log("按下", this);      //  按下打印一次，（一直不送开也只打印一次）
            // }


            // span.onmouseup = function () {      //  监听点击事件
            //     console.log("抬起", this);      //  抬起才会打印一次
            // }

            // span.onmouseenter = function () {       //  鼠标滑入
            //     console.log("滑入");
            // }

            // span.onmousemove = function () {       //  鼠标移动
            //     console.log("移动");
            // }

            // span.onmouseleave = function () {       //  鼠标滑出
            //     console.log("滑出");
            // }

            // span.oncontextmenu=function(){
            //     console.log("右键菜单");
            //     return false        //  return false则不显示右键菜单
            // }
            // }

        </script>




        <script>// // -------------键盘-----------------------
            // let input = document.querySelector("input")

            // input.onkeydown = function () {     // 按下触发（不抬起一直触发）
            //     console.log(this.value);        // （每次打印都是全部内容）
            // }

            // input.onkeypress = function () {    //  按下能产生字符的键，触发（不抬起一直触发）
            //     console.log(this.value);        // （每次打印都是全部内容）
            // }

            // input.onkeyup = function () {       //  抬起触发
            //     console.log(this.value);        // （每次打印都是全部内容）
            // }

        </script>



        <script>// // -------------输入框-----------------------
            // input.onfocus = function () {       //  点击触发
            //     console.log("聚焦");            // （每次打印都是全部内容）
            // }

            // input.onblur = function () {       //  点击触发
            //     console.log("失焦");            // （每次打印都是全部内容）
            // }

            // input.oninput = function () {       //  内容改变立即触发
            //     console.log("input");            // （每次打印都是全部内容）
            // }

            // input.onchange = function () {       //  内容改变+失焦才触发
            //     console.log("change");            // （每次打印都是全部内容）
            // }

            // document.querySelector("input").oninput = function (e) {
            //     console.log(e.data);        //  输入的键
            // }

        </script>



        <script>// // -------------表单-----------------------
            // document.forms[0].onsubmit=function(){      // 提交时执行自定义操作
            //     console.log("点击了提交");
            //     return false        //  避免真的提交，跳转页面
            // }
        </script>





        <script>// // -------------停止冒泡捕获穿透-----------------------
            // // 法1
            // let divs = document.querySelectorAll("div")
            // divs.forEach(function (item, index) {
            //     item.onclick = function () {        // 点击内部，会出现内部和外部两个结果
            //         console.log(this);          //  穿透了
            //     }
            // })



            // // 法2
            // let outer = document.querySelector(".outer")
            // let inner = document.querySelector(".inner")
            // outer.onclick = function () {
            //     console.log(this);
            // }
            // inner.onclick = function () {       //  依然会穿透
            //     console.log(this);
            // }



            // // 法3
            // let outer = document.querySelector(".outer")
            // let inner = document.querySelector(".inner")
            // outer.onclick = function (e) {
            //     console.log(e.pageX, e.pageY);
            //     console.log(e.target);
            // }

            // inner.onclick = function (e) {       //  依然会穿透
            //     console.log(e.target);
            // }




            // 法3+.stopPropagation
            // let outer = document.querySelector(".outer")
            // let inner = document.querySelector(".inner")
            // outer.onclick = function (e) {
            //     console.log(e.pageX, e.pageY);
            //     console.log(e.target);
            // }

            // inner.onclick = function (e) {
            //     e.stopPropagation();        //  停止冒泡捕获
            //     console.log(e.target);      //  不再穿透
            // }








            // 超链接不跳转
            // let outer = document.querySelector(".outer")
            // let inner = document.querySelector(".inner")
            // let a=document.querySelector("a")
            // outer.onclick = function (e) {
            //     console.log(e.pageX, e.pageY);
            //     console.log(e.target);
            // }

            // inner.onclick = function (e) {
            //     e.stopPropagation();        //  阻止冒泡穿透
            //     console.log(e.target);      //  不再穿透
            // }
            // a.onclick=function(e){
            //     e.stopPropagation()     //   阻止冒泡穿透

            //     e.preventDefault()      //  阻止默认事件（这里是超链接跳转）

            //     console.log(e);
            //     location.href="https://www.jd.com"      //  自定义跳转到京东
            // }




        </script>



        <script>// // -------------不覆盖打印-----------------------
            // document.onclick = function () {
            //     console.log("AAAAA");
            // }
            // document.onclick = function () {
            //     console.log("BBBBB");        //  覆盖AAAAA
            // }

            // document.onclick = function () {
            //     console.log("CCCCC");        //  覆盖BBBBB
            //     document.onclick = null         //  打印一次后，变为空，不能继续点击打印
            // }




            // document.addEventListener("click", function () {    //  同时打印且不会覆盖其他打印
            //     console.log("AAAAA");
            //     console.log("BBBBB");
            //     console.log("CCCCC");
            //     // document.onclick=null       //  无效
            // })



            // let fun1 = function () { console.log("AAAAA") }
            // let fun2 = function () { console.log("BBBBB") }
            // document.addEventListener("click", fun1)
            // document.addEventListener("click", fun2)
            // document.removeEventListener("click", fun1)     //  删除指定目标的指定事件


        </script>


    </div>








    <div><!-- ----------------------------------三，修改内容------------------------ -->

        <script>
            // // -------------元素-----------------------
            // let span = document.querySelector("span")


            // // -------------绑定事件-----------------------
            // span.onclick = function () {


            //     // -------------获取内容-----------------------
            //     console.log(this.innerText);        // innerText只获取内容，不关心标签功能

            //     this.innerText = "妈妈生的"     //  自定义跳转

            //     this.innerText = "<a href='#top'>芝士雪豹</a>" // innerText只获取内容，不关心标签功能

            //     this.innerHTML = "<a href='#top'>芝士雪豹</a>" // innerHTML获取内容也会实现标签功能

            // }
        </script>




        <script>
            // -------------属性-----------------------
            let data = document.querySelector("img")


            // -------------绑定事件-----------------------
            // data.addEventListener("click", function () {    //  换一次之后就不能换回来了
            //     this.src = "/素材/img/微信.png"
            // })


            // let tochange = false
            // data.addEventListener("click", function () {
            //     tochange = !tochange
            //     if (tochange) {
            //         this.src = "/素材/img/微信.png"
            //         this.title = "微信"
            //     }
            //     else {
            //         this.src = "/素材/img/QQ.png"
            //         this.title = "QQ"
            //     }


            //     console.log(this.getAttribute("src"));      //  获取属性
            //     this.setAttribute("alt", new Date().getTime())  //  修改属性
            //     if (this.hasAttribute("style")) {       //  是否拥有属性
            //         this.removeAttribute("style")       //  删除属性
            //     }
            //     else {
            //         this.setAttribute("style", "width:100px")
            //     }
            // })




        </script>








    </div>







    <div><!-- ----------------------------------四，案例------------------------ -->
        <script>
            // // -------------计数器案例（单个）-----------------------
            // let num = 10
            // let btns = document.querySelectorAll(".counter button")
            // let sub_btn = btns[0]
            // let add_btn = btns[1]
            // let num_ele = document.querySelector(".counter span")
            // num_ele.innerText = num

            // sub_btn.onclick = function () {
            //     num--
            //     num_ele.innerText = num

            // }

            // add_btn.onclick = function () {
            //     num++
            //     num_ele.innerText = num
            // }



            // // -------------计数器案例（多个）-----------------------
            // let nums = [10, 15, 20]
            // let counters = document.querySelectorAll(".counter")
            // counters.forEach(function (item, index) {
            //     let btns = item.querySelectorAll("button")
            //     let sub_btn = btns[0]
            //     let add_btn = btns[1]
            //     let num_ele = item.querySelector("span")
            //     num_ele.innerText = nums[index]


            //     sub_btn.onclick = function () {
            //         nums[index]--
            //         num_ele.innerText = nums[index]
            //     }

            //     add_btn.onclick = function () {
            //         nums[index]++
            //         num_ele.innerText = nums[index]
            //     }

            // })







        </script>

    </div>


</body>

</html>